<template>
  <div id="app">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/1.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/2.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/3.png" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 搜索功能区 -->
    <!-- <Search :right_color="'#fff'"></Search> -->

    <!-- 四宫格 -->
    <van-grid class="classification" :border="false">
      <van-grid-item icon="../../assets/img/g1.png" text="">
        <img src="@/assets/下载.png" />整租</van-grid-item
      >
      <van-grid-item icon="../../assets/img/g1.png" text="">
        <img src="@/assets/下载 (1).png" />合租</van-grid-item
      >
      <van-grid-item icon="../../assets/img/g1.png" text="">
        <img src="@/assets/下载 (2).png" />地图找房</van-grid-item
      >
      <van-grid-item icon="../../assets/img/g1.png" text="">
        <img src="@/assets/下载 (3).png" />出租</van-grid-item
      >
    </van-grid>

    <!-- 租房小组标题 -->
    <div class="home_title">
      <h4>租房小组</h4>
      <p><a>更多</a></p>
    </div>
    <!-- 内容展示 -->
    <van-grid
      class="recommend"
      :gutter="10"
      direction="horizontal"
      column-num="2"
    >
      <van-grid-item>
        <img src="" alt="" />
        <span>家住回龙观 <br />归属的感觉</span>
      </van-grid-item>
      <van-grid-item>
        <img src="" alt="" />
        <span>宜居四五环 <br />大都市生活</span>
      </van-grid-item>
      <van-grid-item>
        <img src="" alt="" />
        <span>喧嚣三里屯 <br />繁华的背后</span>
      </van-grid-item>
      <van-grid-item>
        <img src="" alt="" />
        <span>比邻十号线 <br />地铁心连心</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
// 导入搜索组件
// import Search from "@/components/Search.vue";
export default {
  components: {
    // Search,
  },
  data() {
    return {};
  },
  methods: {},
  created() {},
};
</script>
<style lang="less" scoped>
#app {
  min-height: 700px;
  background-color: #eee;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 22px;
  text-align: center;
  height: 212px;
  img {
    width: 375px;
    height: 212px;
  }
}
// 标题样式
.home_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  h4 {
    margin-bottom: 8px;
  }
  p {
    font-size: 14px;
    color: #999;
  }
}

// 分类四宫格
.classification {
  font-size: 14px;
  img {
    height: 50px;
    margin-bottom: 12px;
  }
}

// 租房小组推荐区域
.recommend {
  .van-grid-item {
    align-items: center;
    font-size: 14px;
    img {
      height: 50px;
      margin-right: 10px;
    }
  }
}
</style>
